<template>
<div>
  <input v-model.number="center.lng">
  <input v-model.number="center.lat">
  <input v-model.number="zoom">
  <input>
  <BaiduMap
    double-click-zoom
    :continuous-zoom="true"
    :inertial-dragging="true"
    class="map"
    :scroll-wheel-zoom="true"
    :center="center"
    :zoom="zoom"
    @moving="syncCenterAndZoom"
    @moveend="syncCenterAndZoom"
    @zoomend="syncCenterAndZoom">
    @dblclick="addPolygonPoint"
    @rightclick="as"
  </BaiduMap>
</div>
</template>

<script>
import BaiduMap from 'vue-baidu-map/components/map/Map.vue'
import Index from "@/views/institution/index.vue";
export default {
  components: {
    Index,
    BaiduMap
  },
  data () {
    return {
      center: {
        lng: 116.404,
        lat: 39.915
      },
      zoom: 15
    }
  },
  methods: {
    syncCenterAndZoom (e) {
      const { lng, lat } = e.target.getCenter()
      this.center.lng = lng
      this.center.lat = lat
      this.zoom = e.target.getZoom()
    },
    addPolygonPoint (type, target, pixel, point) {
      console.log(1)
      console.log(type, target, pixel, point)
    },
    as () {
      console.log(1)
    }
  }
}
</script>
